import * as THREE from 'three'
import createApp from '../../core'

function createDirectionalLight (dom: HTMLElement) {
  const { camera, scene, renderer, gui } = createApp(dom)
  renderer.shadowMap.enabled = true
  renderer.shadowMap.type = THREE.PCFSoftShadowMap

  camera.position.set(-120, 80, 120)
  camera.lookAt(scene.position)

  const axes = new THREE.AxesHelper(100)
  scene.add(axes)

  const { ambientColor, ambientIntensity, directionalColor, directionalIntensity, x, y, z } = data
  const ambient = new THREE.AmbientLight(ambientColor, ambientIntensity)
  scene.add(ambient)

  const directionalLight = new THREE.DirectionalLight(directionalColor, directionalIntensity)
  directionalLight.position.set(x, y, z)
  directionalLight.castShadow = true
  scene.add(directionalLight)
  // 要设置相机的视口，不然会发现阴影只有很小一块
  directionalLight.shadow.camera.top = 200
  directionalLight.shadow.camera.bottom = -200
  directionalLight.shadow.camera.left = -200
  directionalLight.shadow.camera.right = 200
  directionalLight.shadow.mapSize.width = 1024 // default
  directionalLight.shadow.mapSize.height = 1024 // default
  directionalLight.shadow.camera.near = 0.5 // default
  directionalLight.shadow.camera.far = 200

  const helper = new THREE.DirectionalLightHelper(directionalLight, 30, 0xff0000)
  scene.add(helper)

  const shadowHelper = new THREE.CameraHelper(directionalLight.shadow.camera)
  scene.add(shadowHelper)

  const planeGeometry = new THREE.PlaneGeometry(200, 200)
  const material = new THREE.MeshStandardMaterial({ color: 0xffffff })
  const plane = new THREE.Mesh(planeGeometry, material)
  plane.receiveShadow = true
  plane.rotateX(-Math.PI / 2)
  scene.add(plane)

  const boxGeometry = new THREE.BoxGeometry(30, 30, 30)
  const boxMaterial = new THREE.MeshStandardMaterial({ color: 0x0000ff })
  const box = new THREE.Mesh(boxGeometry, boxMaterial)
  box.position.set(0, 30, 0)
  box.castShadow = true
  scene.add(box)

  const folder1 = gui.addFolder('环境光参数')
  folder1.addColor(data, 'ambientColor').onChange(() => {
    ambient.color = new THREE.Color(data.ambientColor)
  })
  folder1.add(data, 'ambientIntensity', 0, 10).onChange(() => {
    ambient.intensity = data.ambientIntensity
  })

  const folder2 = gui.addFolder('平行光参数')
  folder2.addColor(data, 'directionalColor').onChange(() => {
    directionalLight.color = new THREE.Color(data.directionalColor)
  })
  folder2.add(data, 'directionalIntensity', 0, 10).onChange(() => {
    directionalLight.intensity = data.directionalIntensity
  })

  const folder3 = gui.addFolder('平行光的方向')
  folder3.add(data, 'x', -100, 100).onChange(() => {
    directionalLight.position.x = data.x
    helper.update()
  })
  folder3.add(data, 'y', -100, 100).onChange(() => {
    directionalLight.position.y = data.y
    helper.update()
  })
  folder3.add(data, 'z', -100, 100).onChange(() => {
    directionalLight.position.z = data.z
    helper.update()
  })
}

const data = {
  ambientColor: 0x000000,
  ambientIntensity: 1,
  directionalColor: 0xffffff,
  directionalIntensity: 1,
  x: 0,
  y: 60,
  z: 0
}

export {
  createDirectionalLight
}
